<layout name="master" />
<!-- 搜索 -->
<div id="search" class="clearfix">
    <a class="prev fl" href="javascript:history.go(-1);" title="后退">&lt;</a>
    <div class="head fl">商品详情</div>
</div>
<!-- 搜索 -->

<style>
    .switchCont form{ width:94%; overflow:hidden; margin:15px 3%; border:1px dashed #eee; font-size:14px;}
    .switchCont form label{ width:20%; color:#999; line-height:30px; padding-left:2%;}
    .switchCont form input.text{ width:50%; color:#999;line-height:30px;}
    .switchCont form input.submit{ width:17%; height:30px; line-height:30px; background:#e1252c; color:#fff; font-size:12px;}


    #Popup{ display:none; position:fixed; top:0; left:0; width:100%; height:100%; z-index:999;}
    #PopupBg{ width:100%; height:100%; background:rgba(0,0,0,0.75);}
    #PopupCt{ position:absolute; top:50%; left:50%; width:280px; height:110px; padding:20px; text-align:left; background:#fff; border-radius:15px; margin:-75px 0 0 -160px;}
    #PopupCt .close{ position:absolute; top:10px; right:10px; width:20px; height:20px; background:#666;}
    #PopupCt .CtText2{ display:block; font-size:14px; line-height:25px; color:#3b3b3b; text-align:left;}
    #PopupCt .CtText{ display:block; width:258px; font-size:14px; color:#3b3b3b; text-align:left; line-height:30px; border:1px solid #999; padding:2px 10px; margin:10px 0;}
    #PopupCt .submit{ float:right; background:#e1252c; padding:5px 10px; font-size:12px; color:#fff; text-align:center; line-height:100%;}
</style>

<!-- 内容切换 -->
<div id="switch">
    <div class="proCont">
        <div class="main_visual clearfix" style="height: 30vh;">
            <div class="main_imag">
                <ul>
                    <foreach name="voi" item="voii" >
                        <li><img src="__ROOT__/data/upload/{$voii}" alt=""></li>
                    </foreach>
                </ul>
            </div>
            <!--<div class="flicking_con">-->
                <!--<foreach name="voi" item="voii" >-->
                    <!--<a href="#">1</a>-->
                <!--</foreach>-->
            <!--</div>-->
            <a href="javascript:;" id="btn_prev"></a>
            <a href="javascript:;" id="btn_next"></a>
        </div>
        <h3>
            <p>{$vo.goods_name}</p>
            <p><span class="fl">已售：{$vo.goods_chengjiao} / 件&nbsp;&nbsp;库存：{$vo.goods_kucun} / 件&nbsp;&nbsp;</span><i class="fr" id="money">{$vo.goods_xiaoshou}</i><i class="fr">￥&nbsp;</i></p>
        </h3>
    </div>
    <div class="proLog"><img class="fl" src="__ROOT__/public/ForegroundTemplate/uploadfile/loga.jpg" /><p class="fr">米透</p></div>

    <div id="navCont">
        <!-- 导航 -->
        <div id="nav" class="clearfix">
            <ul class="navs list5">
                <li><h2 class="cur">详情</h2></li>
                <li><h2>规格</h2></li>
                <li><h2>评价</h2></li>
            </ul>
        </div>
        <!-- 导航 -->
        <!-- 内容 -->
        <div id="cont" class="clearfix">
            <div class="switchCont" style=" display:block;">
                <div class="about" style=" padding:10px 0;">
                    <p><?php echo htmlspecialchars_decode( $vo['goods_xiangxi'] )?></p>
                </div>
            </div>
            <div class="switchCont">
                {$vo.goods_beizhu}
                <br/>
                {$vo.goods_des}
            </div>
            <div class="switchCont">
                <form action="{:U('Face/Ping/index')}" method="post">
                    <input type="text" value="{$vo.id}" name="shangpinid" style="display: none">
                    <label class="fl">评论：</label><input class="text fl" required type="text" placeholder="请输入内容" name="pinglun" />
                    <input class="submit fr" type="submit" value="确定" />
                </form>
                <ul class="comment">
                    <li class="title">评价（{$count}）</li>
                    <volist name="pinglun" id="ai">
                        <li class="bt0 ">
                            <h5 class="mt15">
                                <em><img src="{$ai.headimg}" alt="" /></em>
                                <i style="display: none;">{$ai.id}</i>
                                <p><i>{$ai.name}</i><time><php>echo date("Y年m月d日 H时i分s秒", $ai['time'])</php></time></p>
                                <span>{$ai.text}</span>

                            </h5>
                        </li>
                    </volist>
                </ul>
            </div>
        </div>
        <!-- 内容 -->
    </div>
</div>
<!-- 内容切换 -->

<!-- 底部 -->
<div id="foot" class="clearfix">
    <div class="foot_a">
        <!--<a href="{:U('Face/Shopcar/addcar',['id'=>$vo['id']])}" class="jrgwc">加入购物车</a>-->
        <a style="width: 100%;height: 100%;margin: 0 auto;" href="{:U('Face/Ding/index',['id'=>$vo['id']])}" class="ljgm">立即购买</a>
    </div>
</div>
<!-- 底部 -->
<div id="Popup">
    <div id="PopupBg"></div>
    <div id="PopupCt">
        <form action="{:U('Face/Ping/index')}" method="post">
            <input style="display: none;" type="text" name="huifu" value="">
            <input style="display: none;"  type="text" name="huifuname" value="">
            <label class="CtText2">回复：<i> 123 </i></label>
            <input class="CtText" type="text" placeholder="请输入邀请码" />
            <input class="submit" type="submit" value="确定" />
        </form>
    </div>
</div>


<!-- javascript -->
<script type="text/javascript">
    //弹出框
    $(".Pop").click(function(){
        $("#Popup").fadeIn(300);
    })
    $(".submit").click(function(){
        $("#Popup").fadeOut(300);
    })
    $("#PopupBg").click(function(){
        $("#Popup").fadeOut(300);
    })

    $(document).ready(function(){
        //  点击切换
        $dragBln = false;
        $(".main_image").touchSlider({
            flexible : true,
            speed : 500,
            btn_prev : $("#btn_prev"),
            btn_next : $("#btn_next"),
            paging : $(".flicking_con a"),
            counter : function (e){
                $(".flicking_con a").removeClass("on").eq(e.current-1).addClass("on");
            }
        });
        // 自动轮换
        timer = setInterval(function(){
            $("#btn_next").click();
        }, 3000);
        $(".main_visual").hover(function(){
            clearInterval(timer);
        },function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            },4000);
        });
        $(".main_image").bind("touchstart",function(){
            clearInterval(timer);
        }).bind("touchend", function(){
            timer = setInterval(function(){
                $("#btn_next").click();
            }, 4000);
        });
    });


    //列表切换
    var oTab=document.getElementById("navCont");
    var aH3=oTab.getElementsByTagName("h2");
    var aDiv=document.getElementsByClassName("switchCont");
    for(var i=0;i<aH3.length;i++){
        aH3[i].index=i;
        aH3[i].onclick=function(){
            for(var i=0;i<aH3.length;i++){
                aH3[i].className="";
                aDiv[i].style.display="none";
            }
            this.className="cur";
            aDiv[this.index].style.display="block";
        }
    }


    function jiaJian(kind){
        var oNum=document.getElementById('num');
        var numValue=oNum.value;
        //alert(numValue);
        if(kind==='add'){
            numValue++;
        }else if(kind==='reduce'){
            if(numValue>0)numValue--;
        }
        oNum.value=numValue;
    }
</script>
<!-- javascript -->